<template>
    <div
        class="px-[15px] flex items-center justify-center color-[var(--el-text-color-regular)]"
        @click="toggleClick"
    >
        <svg-icon
            class="hamburger"
            :class="{ 'is-active': isActive }"
            icon-class="indent-decrease"
        />
    </div>
</template>
<script setup lang="ts">
defineProps({
    isActive: {
        required: true,
        type: Boolean,
        default: false,
    },
})

const emit = defineEmits(['toggleClick'])

function toggleClick() {
    emit('toggleClick')
}
</script>

<style scoped lang="scss">
.hamburger {
    vertical-align: middle;
    cursor: pointer;
    // transform: scaleX(-1);
}

.hamburger.is-active {
    transform: scaleX(1);
}
</style>
